var Dimg = document.getElementById('#Dimg');
var sbox = document.getElementById('#sbox');
var imgBox = document.getElementById('#imgBox');
var imgBoxImg = document.getElementsByClassName('img3');

$('#Dimg').mouseover(function(){
    $('#sbox').css('display','block');
    $('#imgBox').css('display','block');
})
$('#Dimg').mouseout(function(){
    $('#sbox').css('display','none');
    $('#imgBox').css('display','none');
})
$('#Dimg').mousemove(function(ev){

    var L = ev.pageX - $('#Dimg').position().left - $('#sbox').width();
    var T = ev.pageY - $('#Dimg').position().top-  $('#sbox').height()*1.5;

    if(L < 0){
        L = 0;
    }
    else if( L >  $('#Dimg').width() -  $('#sbox').width()){
        L =$('#Dimg').width() - $('#sbox').width();
    }

    if(T < 0){
        T = 0;
    }
    else if( T >  $('#Dimg').height() - $('#sbox').height() ){
        T = $('#Dimg').height() - $('#sbox').height();
    }

    $('#sbox').css('left',L)
    $('#sbox').css('top',T)

    var scaleX = L / ( $('#Dimg').width() -  $('#sbox').width());
    var scaleY = T / (  $('#Dimg').height() - $('#sbox').height());

    imgBoxImgleft = - scaleX * ( $('#img3').width()  -$('#imgBox').width() ) + 'px';
    imgBoxImgtop = - scaleY * ( $('#img3').height() - $('#imgBox').height()) + 'px';

    $('#img3').css('left',imgBoxImgleft)
    $('#img3').css('top',imgBoxImgtop)


})